<template>
  <view class="hs-tab-002">
    <view class="title-text" v-if="showData.title">
      <text class="title">{{ showData.title }}</text>
      <view class="more">
        <text>{{ showData.more }}</text>
        <text class="iconfont icon-weibiaoti--10"></text>
      </view>
    </view>
    <scroll-view
      class="menu-scroll"
      scroll-x="true"
      :show-scrollbar="false"
      scroll-with-animation="true"
    >
      <view
        class="hs-tab-item"
        v-for="(item, index) in showData.menuList"
        @click="activeItem(index)"
        :key="index"
      >
        <view class="image-box">
          <image :src="item.imageUrl" mode="widthFix"></image>
        </view>
        <text class="title" v-if="item.artist">{{ item.artist }}</text>
        <text class="title" v-if="item.location">{{ item.location }}</text>
        <view class="price-box" v-if="item.price">
          <text class="rmb">¥</text>
          <text class="price">{{ item.price.split("-")[0] }}</text>
          <text class="price-des">起</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import { defineComponent, reactive, toRefs, onMounted } from "vue";
import { damaiData } from "@/common/simulatedData.js";
export default defineComponent({
  name: "hstab002",
  props: {
    showData: {
      type: Object,
      default: () => {
        return {
          title: "必看演出",
          more: "全部",
          menuList: damaiData,
        };
      },
    },
  },
  components: {},
  setup(props, ctx) {
    const data = reactive({
      damaiData,
    });
    onMounted(() => {});
    const activeItem = (index) => {
      ctx.emit("activeItem", index);
    };
    return {
      activeItem,
      ...toRefs(data),
    };
  },
});
</script>

<style scoped lang="less">
.hs-tab-002 {
  padding: 20rpx;
  padding-right: 0;
  background: #fff;
  border-radius: 10rpx;
  .title-text {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10rpx;
    .title {
      font-size: 28rpx;
      font-weight: 700;
    }
    .more {
      font-size: 22rpx;
      color: #6e6e6e;
      display: flex;
      align-items: center;
      padding-right: 20rpx;
      .icon-weibiaoti--10 {
        display: block;
        // 旋转
        transform: rotate(180deg);
        font-size: 22rpx;
      }
    }
  }
  .menu-scroll {
    white-space: nowrap;
    width: 100%;
    box-sizing: border-box;
    .hs-tab-item {
      display: inline-block;
      width: 150rpx;
      margin-right: 10rpx;
      overflow: hidden;
      border-radius: 20rpx;
      .image-box {
        width: 100%;
        height: 180rpx;
        overflow: hidden;
        border-radius: 20rpx;
        margin-bottom: 10rpx;
        image {
          width: 100%;
          display: block;
        }
      }
      .title {
        font-size: 24rpx;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height: 30rpx;
      }
      .price-box {
        .rmb {
          font-size: 18rpx;
          font-weight: 300;
          margin-right: 4rpx;
          color: red;
        }
        .price {
          font-size: 24rpx;
          font-weight: 700;
          color: red;
        }
        .price-des {
          font-size: 18rpx;
          margin-left: 5rpx;
          color: #999;
        }
      }
    }
  }
}
</style>
